
<template>
<div class="tab-bar">
  <el-link :underline="false" :class="pathname == '/' ? 'active' : ''" href="/">
  <img class="home-img" src="@/assets/imgs/1f3e0.png" alt="首页" title="首页" />
    <div class="tab-bar-title">
      首页
    </div>
  </el-link>
  <el-link :underline="false" :class="pathname == '/dictionary' || pathname == '/word' ? 'active' : ''" href="/dictionary">
    <img class="dictionary-img" src="@/assets/imgs/1f4da.png" alt="字典" title="字典" />
    <div class="tab-bar-title">
      字典
    </div>
  </el-link>
  <el-link :underline="false" :class="pathname == 'simpleRand' ? 'active' : ''" href="/simpleRand">
    <img class="rand-img" src="@/assets/imgs/1f3b2.png" alt="随机话" title="随机话" />
    <div class="tab-bar-title">
      随机话
    </div>
  </el-link>
  <!-- <el-link :underline="false" :class="pathname == '' ? 'active' : ''" href="/simpleRand">
    <img class="rand-img" src="@/assets/imgs/1f642.png" alt="我的" title="我的" />
    我的
  </el-link> -->
</div>
</template>

<script lang="ts" setup>
const pathname = location.pathname
</script>
<style lang="scss" scoped>
.tab-bar{
  display: flex;
  height: 60px;
  background-color: #fff;
  border-top: 1px solid #ccc;
  .el-link{
    width: 33%;
    ::v-deep .el-link__inner{
      flex-direction: column;
    }
    img{
      width: 25px;
      height: 25px;
      margin-top: 10px;
    }
    .tab-bar-title{
      height: 30px;
      line-height: 30px;
    }
  }
  .active{
    color: #1e80ff;
  }
}
</style>
